সিএসএস(৩) দ্বারা আপনি একটি বাটনে আপনার পছন্দমত স্টাইল করতে পারেন। আমরা এই অধ্যায়ে দেখবো কিভাবে সিএসএস ব্যবহার করে বাটনের স্টাইল করা যায়।
বেসিক বাটন স্টাইল
kt_satt_skill_example_id=1730
বাটনের কালার
বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে background-color প্রোপারটি ব্যবহার করুনঃ
kt_satt_skill_example_id=1733
বাটনের সাইজ
বাটনের ফন্ট সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1735
বাটনের পেডিং পরিবর্তন করতে padding প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1736
গোলাকৃতি বাটন
বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1737
বাটনের বর্ডার কালার
বাটনে বর্ডার কালার যুক্ত করতে border প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1738
বাটন হোভার
আপনি বাটনে হোবার ইফেক্ট যুক্ত করতে hover সিলেক্টর ব্যবহার করুন।
পরামর্শঃ হোভার এর গতি নিয়ন্ত্রন করার জন্য transition-duration প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1740
বাটন শ্যাডো
বাটনে শ্যাডো যুক্ত করার জন্য box-shadowপ্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1742
ডিজেবল(Disable) বাটন
একটি বাটনকে ডিজেবল এর মত দেখানোর জন্য বাটনে opacity প্রোপার্টি ব্যবহার করুন।
পরামর্শঃ যখন আপনি বাটনের উপর মাউস নিয়ে যাবেন তখন একটি "no parking sign" দেখানোর জন্য cursor প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1744
বাটনের প্রস্থ
ডিফল্ট ভাবে একটি বাটনের সাইজ এর ভিতর অবস্থিত টেক্সটের সাইজের উপর নির্ভর করে। একটি বাটনের সাইজ পরিবর্তন করতে width প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1745
বাটন গ্রুপ
বাটন গুলো থেকে মার্জিন বাদ দিয়ে float:left প্রোপার্টি যুক্ত করে বাটনের গ্রুপ তৈরি করা যায়ঃ
kt_satt_skill_example_id=1746
বর্ডার সহ বাটন গ্রুপ
বর্ডার সহ বাটন গ্রুপ তৈরি করতে বাটন গ্রুপের সাথে border প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1748
এনিমেটেড বাটন
একটি বাটনে আপনি বিভিন্ন ধরনের এনিমেশন যুক্ত করতে পারবেন। তার মধ্যে আমরা নিম্নের বাটনের ভিতর হোবার ইফেক্টে এরো (arrow ) চিহ্ন যুক্ত করবোঃ
kt_satt_skill_example_id=1749
এই উদাহরনে আমরা বাটন ক্লিকে একটি রিপল("ripple") ইফেক্ট যুক্ত করবোঃ
kt_satt_skill_example_id=1751
এই উদাহরনে আমরা বাটন ক্লিকে একটি প্রেস("pressed") ইফেক্ট যুক্ত করবোঃ
kt_satt_skill_example_id=1752
Read more
